<template>
  <div class="block">
    <el-carousel
      trigger="click"
      height="560px"
      v-loading="loading"
    >
      <el-carousel-item
        v-for="(intro,index) in introductions"
        :key="index"
      >
        <img :src="intro.content" />
      </el-carousel-item>
    </el-carousel>
    <el-checkbox
      class="check"
      v-model="state"
    >
      下次跳过新手指引
    </el-checkbox>
  </div>
</template>

<script>
import { resourceContent } from '@/api/resource'
import { updateBeginnerState } from '@/api/user'
export default {
  name: 'Intro',
  data () {
    return {
      loading: false,
      introductions: [],
      state: false
    }
  },
  watch: {
    state () {
      this.handleUpdateBeginnerState()
    }
  },
  methods: {
    async handleResourceContent () {
      this.loading = true
      const { data } = await resourceContent(7)
      this.introductions = data
      this.loading = false
    },
    // 更新新手状态
    async handleUpdateBeginnerState () {
      await updateBeginnerState(!this.state)
    }
  }
}
</script>
<style>
.el-carousel__item {
  background-color: #99a9bf;
}
img {
  width: 100%;
}
.check {
  margin: 10px 0 0 10px;
}
</style>
